import './Index.css';
import {Link} from "react-router-dom";
import HotImage from "../../../assets/images/hot_article_1.jpg";
import React from "react";
import ArticleImg from '../../../assets/images/xcx.jpg';


function Classify() {
	return (
		<div className="main">
			<div className="current-label">
				<h3>开源</h3>
			</div>
			<div className="container">
				<div className="center-list">
					<div className="article-wrapper">
						<div className="article_con">
							<div className="article-lwrap">
								<div className="img_con">
									<img src={ArticleImg} alt=""/>
								</div>
								<div className="list_content">
									<Link to="#">
										<p>基于React+Koa从0到1实现h5页面可视化编辑器－Dooring</p>
									</Link>
									<div className="list-bottom">
										<div className="labels-area">
											<label className="moco-label">
												<Link to="#">前端开发</Link>
											</label>
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>2898</span>
											</div>
											<span className="skill">
												<Link to="#"><span>html</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>React</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>开源</span></Link>
											</span>
											<div className="createTime">11.20 19:45</div>
										</div>
									</div>
								</div>
							</div>
							<div className="article-lwrap">
								<div className="img_con">
									<img src={ArticleImg} alt=""/>
								</div>
								<div className="list_content">
									<Link to="#">
										<p>基于React+Koa从0到1实现h5页面可视化编辑器－Dooring</p>
									</Link>
									<div className="list-bottom">
										<div className="labels-area">
											<label className="moco-label">
												<Link to="#">前端开发</Link>
											</label>
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>2898</span>
											</div>
											<span className="skill">
												<Link to="#"><span>html</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>React</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>开源</span></Link>
											</span>
											<div className="createTime">11.20 19:45</div>
										</div>
									</div>
								</div>
							</div>
							<div className="article-lwrap">
								<div className="img_con">
									<img src={ArticleImg} alt=""/>
								</div>
								<div className="list_content">
									<Link to="#">
										<p>基于React+Koa从0到1实现h5页面可视化编辑器－Dooring</p>
									</Link>
									<div className="list-bottom">
										<div className="labels-area">
											<label className="moco-label">
												<Link to="#">前端开发</Link>
											</label>
											<div className="browseNum">
												<i className="iconfont">&#xe600;</i>
												<span>2898</span>
											</div>
											<span className="skill">
												<Link to="#"><span>html</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>React</span></Link>
												<i className="iconfont">&#xe654;</i>
												<Link to="#"><span>开源</span></Link>
											</span>
											<div className="createTime">11.20 19:45</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div className="right-hot">
					<div className="hot_article">
						<div className="hot_title">
							<h3>热门文章</h3>
							<div className="hot_more"><Link to="#">更多<i className="iconfont">&#xe626;</i></Link></div>
						</div>
						<ul className="hot_list">
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">看看别人后端API接口写得，那叫一个优雅！</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">基于web的机票管理系统设计与实现（二）</div>
								</Link>
							</li>
							<li className="hot_list_item">
								<div className="hot_img">
									<img src={HotImage} alt="" />
								</div>
								<Link to="#">
									<div className="hot_text">Python学习路线</div>
								</Link>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	)
}

export default Classify;